<template>
  <div>
    <div id="title">
      <h1 style="text-align: center; margin-top: 10px; margin-bottom: 20px">
        我的日程
      </h1>
      <!-- <h3 style="text-align: center;margin-bottom: 10px;">You can manage your tasks here</h3> -->
    </div>
    <Row>
      <Col span="23" offset="1">
        <Card
          dis-hover
          style="margin-top: 20px; z-index: 1; margin: auto"
          class="calendar"
          :style="{ width: calendarWidth }"
        >
          <FullCalendar true ref="fullcalendar" :options="calendarOptions" />
        </Card>
      </Col>
    </Row>
    <Modal v-model="prepAddNewEventModal" title="添加一个新的日程">
      <Form
        ref="calendarEventForm"
        :model="calendarEventForm"
        :label-width="100"
        label-position="left"
      >
        <FormItem label="日程类型">
          <RadioGroup v-model="calendarEventForm.color">
            <Radio label="#2d8cf0">日程</Radio>
            <Radio label="#FF60AF">学习</Radio>
            <Radio label="#19be6b">生活</Radio>
          </RadioGroup>
        </FormItem>
        <FormItem label="日程标题" prop="title">
          <Input v-model="calendarEventForm.title" placeholder="日程标题">
          </Input>
        </FormItem>
        <FormItem label="全天事件" prop="allDay">
          <i-switch v-model="calendarEventForm.allDay" />
        </FormItem>
        <FormItem label="开始时间" prop="start" v-if="calendarEventForm.allDay">
          <DatePicker
            v-model="calendarEventForm.start"
            format="yyyy-MM-dd"
            placeholder="开始时间"
            style="width: 386px"
          ></DatePicker>
        </FormItem>
        <FormItem label="结束时间" prop="end" v-if="calendarEventForm.allDay">
          <DatePicker
            v-model="calendarEventForm.end"
            format="yyyy-MM-dd"
            placeholder="结束时间"
            style="width: 386px"
          ></DatePicker>
        </FormItem>
        <FormItem
          label="开始时间"
          prop="start"
          v-if="!calendarEventForm.allDay"
        >
          <Row>
            <Col span="11">
              <DatePicker
                type="date"
                placeholder="选择开始日期"
                format="yyyy-MM-dd"
                v-model="calendarEventForm.startRecur"
              ></DatePicker>
            </Col>
            <Col span="2" style="text-align: center">-</Col>
            <Col span="11">
              <TimePicker
                type="time"
                placeholder="选择开始时间"
                v-model="calendarEventForm.startTime"
              ></TimePicker>
            </Col>
          </Row>
        </FormItem>
        <FormItem label="结束时间" prop="end" v-if="!calendarEventForm.allDay">
          <Row>
            <Col span="11">
              <DatePicker
                type="date"
                placeholder="选择结束日期"
                format="yyyy-MM-dd"
                v-model="calendarEventForm.endRecur"
              ></DatePicker>
            </Col>
            <Col span="2" style="text-align: center">-</Col>
            <Col span="11">
              <TimePicker
                type="time"
                placeholder="选择结束时间"
                v-model="calendarEventForm.endTime"
              ></TimePicker>
            </Col>
          </Row>
        </FormItem>
        <FormItem label="备注" prop="remark">
          <Input
            v-model="calendarEventForm.remark"
            placeholder="备注..."
            type="textarea"
            :rows="3"
          >
          </Input>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button @click="prepAddNewEventModal = false">取消</Button>
        <Button type="success" @click="addNewEvent()">添加日程</Button>
      </div>
    </Modal>
    <Modal v-model="editEventModal" title="修改日程">
      <Form
        ref="calendarEventForm"
        :model="calendarEventForm"
        :label-width="100"
        label-position="left"
      >
        <FormItem label="日程类型">
          <RadioGroup v-model="calendarEventForm.color">
            <Radio label="#2d8cf0">日程</Radio>
            <Radio label="#FF60AF">学习</Radio>
            <Radio label="#19be6b">生活</Radio>
          </RadioGroup>
        </FormItem>
        <FormItem label="日程标题" prop="title">
          <Input v-model="calendarEventForm.title" placeholder="日程标题">
          </Input>
        </FormItem>
        <FormItem label="全天事件" prop="allDay">
          <i-switch v-model="calendarEventForm.allDay" />
        </FormItem>
        <FormItem label="开始时间" prop="start" v-if="calendarEventForm.allDay">
          <DatePicker
            v-model="calendarEventForm.start"
            format="yyyy-MM-dd"
            placeholder="开始时间"
            style="width: 386px"
          ></DatePicker>
        </FormItem>
        <FormItem label="结束时间" prop="end" v-if="calendarEventForm.allDay">
          <DatePicker
            v-model="calendarEventForm.end"
            format="yyyy-MM-dd"
            placeholder="结束时间"
            style="width: 386px"
          ></DatePicker>
        </FormItem>
        <FormItem
          label="开始时间"
          prop="start"
          v-if="!calendarEventForm.allDay"
        >
          <Row>
            <Col span="11">
              <DatePicker
                type="date"
                placeholder="选择开始日期"
                format="yyyy-MM-dd"
                v-model="calendarEventForm.startRecur"
              ></DatePicker>
            </Col>
            <Col span="2" style="text-align: center">-</Col>
            <Col span="11">
              <TimePicker
                type="time"
                placeholder="选择开始时间"
                v-model="calendarEventForm.startTime"
              ></TimePicker>
            </Col>
          </Row>
        </FormItem>
        <FormItem label="结束时间" prop="end" v-if="!calendarEventForm.allDay">
          <Row>
            <Col span="11">
              <DatePicker
                type="date"
                placeholder="选择结束日期"
                format="yyyy-MM-dd"
                v-model="calendarEventForm.endRecur"
              ></DatePicker>
            </Col>
            <Col span="2" style="text-align: center">-</Col>
            <Col span="11">
              <TimePicker
                type="time"
                placeholder="选择结束时间"
                v-model="calendarEventForm.endTime"
              ></TimePicker>
            </Col>
          </Row>
        </FormItem>
        <FormItem label="备注" prop="remark">
          <Input
            v-model="calendarEventForm.remark"
            placeholder="备注..."
            type="textarea"
            :rows="3"
          >
          </Input>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button @click="editEventModal = false">取消</Button>
        <Button type="success">修改</Button>
      </div>
    </Modal>
    <Modal
      v-model="selectEventModalShow"
      footer-hide
      :closable="false"
      :styles="{ top: '150px' }"
      class="eventShow"
      width="370"
    >
      <div
        style="height: 150px; border-radius: 19px 19px 0 0"
        :style="{ backgroundColor: selectEvent.backgroundColor }"
      >
        <h1
          style="
            position: absolute;
            color: white;
            margin-left: 30px;
            margin-top: 30px;
          "
        >
          {{ selectEvent.title }}
        </h1>
        <h3
          style="
            position: absolute;
            color: white;
            margin-left: 30px;
            margin-top: 115px;
          "
          v-if="selectEvent.endStr != '' && selectEvent.allDay"
        >
          <Icon
            type="md-time"
            size="16"
            style="margin-right: 3px; display: inline; vertical-align: middle"
          />
          {{ selectEvent.startStr }} - {{ selectEvent.endStr }}
        </h3>
        <h3
          style="
            position: absolute;
            color: white;
            margin-left: 30px;
            margin-top: 95px;
          "
          v-else-if="selectEvent.endStr != '' && !selectEvent.allDay"
        >
          <Icon
            type="md-time"
            size="16"
            style="margin-right: 3px; display: inline; vertical-align: middle"
          />
          {{ filterStartTimeStyle }}
          <Icon
            type="md-remove"
            size="16"
            style="margin-right: 3px; display: inline; vertical-align: middle"
          />
          {{ filterEndTimeStyle }}
        </h3>
        <h3
          style="
            position: absolute;
            color: white;
            margin-left: 30px;
            margin-top: 95px;
          "
          v-else
        >
          <Icon
            type="md-time"
            size="16"
            style="margin-right: 3px; display: inline; vertical-align: middle"
          />
          {{ selectEvent.startStr }}
        </h3>
      </div>
      <div
        style="height: 320px; border-radius: 6px"
        v-if="selectEvent.extendedProps"
      >
        <vue-scroll
          :ops="ops"
          style="height: 300px; margin-top: 10px"
          class="eventScroll"
        >
          <div
            style="margin-left: 30px; margin-top: 15px; width: 310px"
            v-if="selectEvent.extendedProps.remark != ''"
          >
            <h2>备注</h2>
            <h4
              style="margin-top: 5px"
              :class="!remarkShow ? 'remarkContent' : 'remarkContentExpand'"
              :title="selectEvent.extendedProps.remark"
              @click="changeRemarkShow"
            >
              {{ selectEvent.extendedProps.remark }}
            </h4>
            <Divider />
          </div>
          <div style="margin-left: 30px; margin-top: 15px; width: 310px">
            <span style="font-size: 1.5em; font-weight: 600">提醒</span>
            <i-switch
              v-model="selectEvent.extendedProps.remind"
              style="margin-left: 170px; vertical-align: top"
            />
          </div>
          <div style="margin-left: 30px; margin-top: 60px">
            <Button
              shape="circle"
              title="编辑"
              icon="ios-create"
              style="width: 45px; height: 45px"
              @click="editEventModalShow"
            ></Button>
            <Button
              shape="circle"
              title="删除"
              icon="md-trash"
              size="large"
              style="width: 45px; height: 45px; margin-left: 7px"
              @click="confirmDeleteModal = true"
            ></Button>
          </div>
        </vue-scroll>
      </div>
    </Modal>
    <Modal v-model="confirmDeleteModal" :styles="{ top: '320px' }" width="250">
      <h2>确定删除该日程?</h2>
      <div slot="footer">
        <Button @click="confirmDeleteModal = false">取消</Button>
        <Button type="error" @click="deleteEvent">确认删除</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import FullCalendar from "@fullcalendar/vue";
import dayGridPlugin from "@fullcalendar/daygrid";
import interactionPlugin, { Draggable } from "@fullcalendar/interaction";
import timeGridPlugin from "@fullcalendar/timegrid";
import listPlugin from "@fullcalendar/list";
import { formatDate, Calendar } from "@fullcalendar/core";
import { get, post, del, put } from "@/axios";

export default {
  name: "todoList",
  components: {
    FullCalendar,
  },
  data() {
    return {
      //测试数据，可删
      // 日历组件数据
      calendarOptions: {
        plugins: [dayGridPlugin, interactionPlugin, timeGridPlugin, listPlugin],
        initialView: "dayGridMonth", //初始化视图类型
        dateClick: this.handleDateClick, //点击日期触发事件
        firstDay: 1,
        validRange: {
          start: "2020-1-1",
          end: "2025-12-30",
        },
        eventClick: this.handleEventClick, //事件的点击事件
        //weekends: false,
        selectable: true, //是否可以选择
        droppable: true,
        editable: false, //是否可以拖拽编辑
        events: [{ title: "放假", date: "2005-01-01", id: 1 }],
        buttonText: {
          //右侧按钮
          day: "日视图",
          month: "月视图",
          week: "周视图",
        },
        headerToolbar: {
          left: "prev,next today", // 左侧按钮  点击触发对应顺序的字符串代表的事件
          center: "title", // 中间标题
          right: "dayGridMonth,dayGridWeek,dayGridDay",
          // 右侧按钮 点击触发对应顺序的字符串代表的事件
        },
        aspectRatio: 2.2,
        weekNumbers: true,
        handleWindowResize: true,
        windowResize: function (view) {
          // alert('The calendar has adjusted to a window resize');
          let calendar = document.getElementsByClassName("calendar")[0];
          calendar.style.width = window.innerWidth - 480 + "px";
          location.reload();
        },
      },
      eventList: [
        { title: "放假", start: "2022-01-01", color: "#2d8cf0", id: 1 },
        { title: "上班", start: "2022-01-10", color: "#2d8cf0", id: 2 },
        {
          title: "寒假",
          start: "2022-01-01",
          end: "2022-01-07",
          color: "#FF60AF",
          id: 3,
        },
      ],
      calendarWidth: window.innerWidth - 480 + "px",
      calendarEventForm: {
        color: "#2d8cf0",
        title: "",
        allDay: true,
        start: "",
        end: "",
        startTime: "",
        endTime: "",
        startRecur: "",
        endRecur: "",
        remark: "",
        remind: false,
      },
      selectDay: {},
      selectEvent: {},
      prepAddNewEventModal: false,
      editEventModal: false,
      selectEventModalShow: false,
      confirmDeleteModal: false,
      contentHeight: "",
      ops: {
        bar: {
          background: "#808695",
        },
      },
      remarkShow: false,
    };
  },
  mounted() {
    this.initEvents();
    this.resizeContent();
    this.reSize();
    window.addEventListener("resize", this.reSize);
  },
  beforeDestroy: function () {
    window.removeEventListener("resize", this.reSize);
  },
  methods: {
    resizeContent() {
      if (window.innerHeight > 800) {
        this.contentHeight = window.innerHeight - 120;
      } else {
        this.contentHeight = 800;
      }
      window.onresize = () => {
        return (() => {
          this.resizeContent();
        })();
      };
    },
    reSize() {},
    async initEvents() {
      //从后台请求events
      try {
        let res = await get("/visualResourceLibrary/schedule/getSchedule");
        // console.log(res);
        this.eventList = res.data.data.data;
        let list = this.eventList;
        for (let i = 0; i < list.length; i++) {
          this.calendarOptions.events.push(list[i]);
        }
      } catch (e) {
        console.log(e);
      }
      // let list = this.eventList;
      // for(let i = 0; i < list.length; i++){
      //   this.calendarOptions.events.push(list[i]);
      // }
    },
    handleDateClick: function (arg) {
      //alert('日期是' + arg.dateStr);
      // 初始化calendarEventForm
      this.calendarEventForm = {
        color: "#2d8cf0",
        title: "",
        start: "",
        end: "",
        allDay: true,
        startTime: "",
        endTime: "",
        startRecur: "",
        endRecur: "",
        remark: "",
        remind: false,
      };
      this.selectDay = arg.dateStr;
      this.calendarEventForm.start = arg.dateStr;
      this.calendarEventForm.end = arg.dateStr;
      this.calendarEventForm.startRecur = arg.dateStr;
      this.calendarEventForm.endRecur = arg.dateStr;
      this.prepAddNewEventModal = true;
    },
    async addNewEvent() {
      let eventInfo = JSON.parse(JSON.stringify(this.calendarEventForm));
      //从后台请求添加新的event
      // console.log(eventInfo);
      if (!eventInfo.allDay) {
        // 使限制的结束事件延后一天
        let endTimeRecur = new Date(this.calendarEventForm.endRecur);
        endTimeRecur.setDate(endTimeRecur.getDate() + 1);
        eventInfo.endRecur = endTimeRecur.Format("yyyy-MM-dd");
      } else {
        // 清除Recur
        eventInfo.endRecur = "";
        eventInfo.startRecur = "";
      }
      try {
        let res = await post(
          "/visualResourceLibrary/schedule/addSchedule",
          eventInfo
        );
        // console.log(res);
        this.calendarOptions.events.push(eventInfo);
        this.prepAddNewEventModal = false;
      } catch (e) {
        console.log(e);
      }
    },
    handleEventClick(arg) {
      // console.log(arg);
      this.selectEvent = arg.event;
      this.remarkShow = false;
      this.selectEventModalShow = true;
    },
    editEventModalShow() {
      this.selectEventModalShow = false;
      this.calendarEventForm = {
        color: this.selectEvent.backgroundColor,
        title: this.selectEvent.title,
        start: this.selectEvent.start,
        end: this.selectEvent.end,
        allDay: this.selectEvent.allDay,
        startTime: this.selectEvent.startStr.split("T")[1],
        endTime: this.selectEvent.endStr.split("T")[1],
        startRecur: this.selectEvent.start,
        endRecur: this.selectEvent.end,
        remark: this.selectEvent.extendedProps.remark,
      };
      this.editEventModal = true;
    },
    async deleteEvent() {
      try {
        let res = await get(
          "/visualResourceLibrary/schedule/deleteSchedule/" +
            this.selectEvent.id
        );
        // console.log(res);
        this.$Message.success("删除成功");
        for (let i = 0; i < this.calendarOptions.events.length; i++) {
          if (this.calendarOptions.events[i].id == this.selectEvent.id) {
            this.calendarOptions.events.splice(i, 1);
          }
        }
        this.selectEventModalShow = false;
        this.confirmDeleteModal = false;
      } catch (e) {
        console.log(e);
      }
    },
    test: function () {
      // console.log("1231312")
    },
    changeRemarkShow() {
      this.remarkShow = !this.remarkShow;
    },
  },
  computed: {
    filterStartTimeStyle() {
      if (
        this.selectEvent.startStr &&
        this.selectEvent.startStr.indexOf("+") > 0
      ) {
        let result = this.selectEvent.startStr.split("+")[0];
        return result.replace("T", " ");
      } else {
        return this.selectEvent.startStr;
      }
    },
    filterEndTimeStyle() {
      if (this.selectEvent.endStr && this.selectEvent.endStr.indexOf("+") > 0) {
        let result = this.selectEvent.endStr.split("+")[0];
        return result.split("T")[1];
      } else {
        return this.selectEvent.endStr;
      }
    },
  },
};
</script>

<style scoped>
@import "@fullcalendar/common/main.css";
@import "@fullcalendar/daygrid/main.css";
.calendar {
  min-width: 800px;
}

.remarkContent {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  white-space: pre-wrap;
}

.remarkContentExpand {
  white-space: pre-wrap;
}

.todoCard {
  background-color: white;
  border-radius: 3px;
  border: 1px solid #dadce0;
  box-shadow: 0 3.2px 7.2px 0 rgb(0 0 0 / 13%), 0 0.6px 1.8px 0 rgb(0 0 0 / 11%);
}

.badge {
  display: inline-block;
  min-width: 10px;
  padding: 3px 7px;
  font-size: 12px;
  font-weight: bold;
  line-height: 1;
  color: #ffffff;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  background-color: #999999;
  border-radius: 10px;
}

.todoItemInfo {
  width: 35%;
  margin-right: 5%;
  display: inline-block;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: top;
  cursor: pointer;
  overflow: hidden;
}

.eventShow >>> .ivu-modal-body {
  padding: 0;
}
.eventShow >>> .ivu-modal-content {
  border-radius: 20px;
}
.eventScroll >>> .__panel {
  height: 95%;
}
</style>
